import { ExtendCalendarProps, ExtendCalendarPropsType } from '../extend-calendar.props';
import { SetupContext, Ref } from 'vue';
export default function (
    props: ExtendCalendarPropsType,
    context: SetupContext,
    date: Ref,
    selftDate: Ref,
    visible: Ref,
    switchCalendarDates: (n: Date) => void,
) {
    const visibleStyle = () => {
        if (visible.value) {
            return `left:2px;`
        } else {
            return `left:52px;`
        }
    }
    const clickTody = () => {
        date.value = new Date();
        selftDate.value = date.value;
        switchCalendarDates(date.value);
    }
    const switchMonth = (n: number) => {
        let d = new Date(date.value)
        date.value = new Date(d.getFullYear(), d.getMonth() + n, d.getDate());
        switchCalendarDates(date.value);
    }
    const formatDate = () => {
        let d = new Date(date.value)
        let ds = d.toDateString().split(' ');
        return `${ds[1]} ${ds[3]}`
    }
    const ruleRender = (els: JSX.Element, key: string): JSX.Element | null => {
        if (!props?.headerConfig) {
            return els
        }
        if (key in props.headerConfig) {
            if (props.headerConfig[key]) {
                return els
            } else {
                return null
            }
        } else {
            return els
        }
    }
    const renderDate = () => {
        let els: JSX.Element = <div class='f-extend-calendar-actions-date-label'>
            <span>{formatDate()}</span>
        </div>
        return ruleRender(els, 'date')
    }
    const renderAction = () => {
        let els = <div class='f-extend-calendar-actions-date-buts'>
            <div class='f-extend-calendar-actions-date-buts-today'>
                <span onClick={() => clickTody()}>Today</span>
            </div>
            <div class='f-extend-calendar-actions-date-buts-group'>
                <div class='fecadbg-item fecadbg-item-first' onClick={() => switchMonth(-1)}>
                    <span> &lt; </span>
                </div>
                <div class='fecadbg-item fecadbg-item-last' onClick={() => switchMonth(1)}>
                    <span> &gt; </span>
                </div>
            </div>
            {/* <span class='f-extend-calendar-actions-date-buts-group-label'>Switch month !</span> */}
        </div>
        return ruleRender(els, 'action')
    }
    const switchVis = (v: Boolean) => {
        visible.value = v;
    }
    const renderToggle = () => {
        let els = <div class='f-extend-calendar-actions-extend'>
            <div class='f-extend-calendar-actions-extend-group'>
                <div class='fecaeg-selected' style={visibleStyle()}>{visible.value ? '周' : '月'}</div>
                <div class='fecaeg-item fecaeg-item-first' onClick={() => switchVis(true)}>周</div>
                <div class='fecaeg-item fecaeg-item-last' onClick={() => switchVis(false)}>月</div>
            </div>
        </div>
        return ruleRender(els, 'toggle')
    }
    return () => {
        let els: JSX.Element | null = <>
            <div class='f-extend-calendar-actions'>
                {renderDate()}
                {renderAction()}
                {renderToggle()}
            </div>
        </>
        if (props?.headerConfig) {
            if ('date' in props.headerConfig && 'action' in props.headerConfig && 'toggle' in props.headerConfig) {
                if (!props.headerConfig.date && !props.headerConfig.action && !props.headerConfig.toggle) {
                    els = null
                }
            }
        }
        return els
    }
}